﻿{extend name="template/pc/shijia/_base.html" /}

{block name="css"}
<link rel="stylesheet" href="__TPMPLATE__pc/shijia/css/picScroll.css">

<link rel="stylesheet" href="__TPMPLATE__pc/shijia/css/swiper/swiper.min.css">
<link rel="stylesheet" href="__TPMPLATE__pc/shijia/css/swiper/certify.css">
{/block}

{block name="main"}

<div class="cont-pc">

    <div class="h-about">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/about-title.png">
            </div>

        </div>

        <div class="h-box h-about-box">
            <a title="{$data.key ?? $system.keywords.value}" href="index-about-index-navid-54.html">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/about-bg1.jpg">
            </a>
        </div>

    </div>

    <div class="h-pro">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/pro-title.png">
            </div>

            <div class="h-box h-pro-box">

                <div class="pro-picScroll">

                    <div class="hd">
                        <a class="next">
                            <i class="fa fa-angle-right"></i>
                        </a>
                        <a class="prev">
                            <i class="fa fa-angle-left"></i>
                        </a>
                    </div>

                    <div class="bd">
                        <ul class="picList">
                            <li>
                                <a title="" href="">
                                    <div class="pic"><img src="__TPMPLATE__pc/shijia/images/pro.jpg" /></div>
                                    <div class="title">效果图1</div>
                                </a>
                            </li>
                            {Dl:list db="Ucase" lang="$lang" field="a.id,a.cid,a.miaoshu,a.title,a.image,a.issue" order="a.image DESC,a.create_time asc" limit="0,6" status="1"}
                            <li>
                                <a title="{$vo.title}" href="{:url('Ucase/detailed',['id'=>$vo.id,'navid'=>$vo.cid],'html',$Request.root.true)}">
                                    <div class="pic"><img alt="{$vo.title??''}" title="{$vo.title}" src="__PUBLIC__/uploads/{$vo.image ?'image/'.$vo.image: 'not.jpg'}"></div>
                                    <div class="title">{$vo.title??''}</div>
                                </a>
                            </li>
						{/Dl:list}
                        </ul>
                    </div>

                </div>

            </div>

            <div class="h-pro-more">
                <a title="{$data.key ?? $system.keywords.value}" href="index-product-index-navid-55.html">查看更多</a>
            </div>

        </div>

    </div>

    <div class="h-advent">

        <div class="h-box h-advent-box">
            <a title="{$data.key ?? $system.keywords.value}" href="">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/advent.jpg">
            </a>
        </div>

    </div>

    <div class="h-news">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/news-title.png">
            </div>

            <div class="h-box h-news-box">

                <div class="news-picScroll">

                    <div class="hd">
                        <a class="next">
                            <i class="fa fa-caret-right"></i>
                        </a>
                        <a class="prev">
                            <i class="fa fa-caret-left"></i>
                        </a>
                    </div>

                    <div class="bd">
                        <ul class="picList">
                            {Dl:list db="Article" lang="$lang" cid="'4'" field="a.id,a.cid,a.miaoshu,a.title,a.image,a.issue,a.create_time"  order="a.image DESC,a.create_time asc" limit="0,6" status="1"}
                            <li>
                                <a title="{$vo.title}" href="{:url('Article/detailed',['id'=>$vo.id,'navid'=>$vo.cid],'html',$Request.root.true)}">
                                    <div class="pic"><img alt="{$vo.title}" title="{$vo.title}" src="__PUBLIC__/uploads/{$vo.image ?'image/'.$vo.image: 'not.jpg'}"></div>
                                    <div class="title">
                                        <p class="pic-title">{$vo.title??''}</p>
                                        <p class="pic-time">{$vo.create_time}</p>
                                        <p class="pic-txt">{$vo.miaoshu??''}</p>
                                    </div>
                                </a>
                            </li>
						{/DL:list}

                            <li>
                                <a title="" href="">
                                    <div class="pic"><img src="__TPMPLATE__pc/shijia/images/news.jpg" /></div>
                                    <div class="title">
                                        <p class="pic-title">广东单个面积最大释迦基地与台湾释迦生产合作社合作</p>
                                        <p class="pic-time">2019-08-21</p>
                                        <p class="pic-txt">湛江双双赢释迦种植基地吸引了台湾释迦种植协会的关注，20日，台湾台东县释台湾台东县释台湾台东县释</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>

            <div class="h-news-more">
                <a title="{$data.key ?? $system.keywords.value}" href="index-article-index-navid-57.html">查看更多</a>
            </div>

        </div>

    </div>

    <div class="h-dashi">

        <div class="h-dashi-bg">
            <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/dashi.jpg">
        </div>

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/dashi-title.png">
            </div>

            <div class="h-box h-dashi-box">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/dashiji-img.png">
            </div>

        </div>

    </div>

    <div class="h-activity">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/gongsi.png">
            </div>

            <div class="h-box h-activity-box">

                <div id="certify">

                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {Dl:list db="Article" lang="$lang" field="a.id,a.cid,a.miaoshu,a.title,a.image,a.issue,a.create_time" order="a.image DESC,a.create_time asc" limit="0,3" status="1"}
                            <div class="swiper-slide">
                                <a title="{$vo.title??''}" href="{:url('Article/detailed',['id'=>$vo.id,'navid'=>$vo.cid],'html',$Request.root.true)}">
                                    <img alt="{$vo.title??''}" src="__PUBLIC__/uploads/{$vo.image ?'image/'.$vo.image: 'not.jpg'}">
                                    <div class="swiper-txt">
                                        <p class="swiper-bg"></p>
                                        <p class="swiper-title">{$vo.title??''}</p>
                                    </div>
                                </a>
                            </div>
							{/DL:list}
                        </div>
                    </div>

                    <div class="swiper-pagination"></div>

                    <div class="swiper-btn-box">

                        <div class="swiper-btn swiper-button-prev"></div>
                        <div class="swiper-btn swiper-button-next"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="h-honor">

        <div class="h-title">
            <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/rongyu.jpg">
        </div>

        <div class="container">

            <div class="h-box h-honor-box">

                <div class="h-honor-left">

                    <div class="h-honor-title">相关荣誉{$vo.title}</div>

                    <div class="h-honor-list">
                        <ul>
                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>

                            <li>
                                <a title="" href="">
                                    <i class="fa fa-stop fa-rotate-45"></i>广东省十佳最美农田
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="h-honor-img">
                    <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/honor-img2.jpg">
                </div>

            </div>

        </div>

    </div>

</div>

<div class="cont-mobile">

    <div class="h-about">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/about-title.png">
            </div>

            <div class="h-box h-about-box">

                <div class="m-about-img">
                    <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/about-left.jpg">
                </div>

                <div class="m-about-cont">
                    <p class="m-ahout-title">走进基地</p>
                    <p class="m-ahout-cn">ENTERING THE BASE</p>
                    <p class="m-ahout-txt">
                        湛江市双双赢农业发展有限公司注册资本500万元,<br>
                        湛江市双双赢农业发展有限公司注册资本500万元,湛江市双双赢农业发展有限公司注册资本500万元,湛江市双双赢农业发展有限公司注册资本500万元,湛江市双双赢农业发展有限公司注册资本500万元
                    </p>
                    <p class="m-ahout-more">
                        <a title="{$data.key ?? $system.keywords.value}" href="index-about-index-navid-54.html">查看更多>></a>
                    </p>
                </div>
            </div>

        </div>

    </div>

    <div class="h-pro">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/pro-title.png">
            </div>

            <div class="h-box h-pro-box">

                <div class="m-pro-list">
                    <ul>
                        <li>
                            <a title="" href="">
                                <div class="m-pro-img"><img alt="" src="__TPMPLATE__pc/shijia/images/pro.jpg" /></div>
                                <div class="m-pro-txt">效果图1</div>
                            </a>
                        </li>

                        <li>
                            <a title="" href="">
                                <div class="m-pro-img"><img alt="" src="__TPMPLATE__pc/shijia/images/pro.jpg" /></div>
                                <div class="m-pro-txt">效果图1</div>
                            </a>
                        </li>

                        <li>
                            <a title="" href="">
                                <div class="m-pro-img"><img alt="" src="__TPMPLATE__pc/shijia/images/pro.jpg" /></div>
                                <div class="m-pro-txt">效果图1</div>
                            </a>
                        </li>

                        <li>
                            <a title="" href="">
                                <div class="m-pro-img"><img alt="" src="__TPMPLATE__pc/shijia/images/pro.jpg" /></div>
                                <div class="m-pro-txt">效果图1</div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="m-pro-more">
                <a title="{$data.key ?? $system.keywords.value}" href="index-product-index-navid-55.html">查看更多</a>
            </div>

        </div>

    </div>

    <div class="h-advent">

        <div class="h-box h-advent-box">
            <a title="{$data.key ?? $system.keywords.value}" href="">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/advent.jpg">
            </a>
        </div>

    </div>

    <div class="h-news">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/news-title.png">
            </div>

            <div class="h-box h-news-box">

                <div class="m-news-list">
                    <ul>
                        <li>
                            <div class="m-news-img"><img alt="" src="__TPMPLATE__pc/shijia/images/news.jpg"></div>
                            <div class="m-news-cont">
                                <p class="m-news-title">广东单个面积最大释迦基地与台湾释迦生产合作社合作</p>
                                <p class="m-news-time">2019-08-21</p>
                                <p class="m-news-txt">湛江双双赢释迦种植基地吸引了台湾释迦种植协会的关注，20日，台湾台东县释台湾台东县释台湾台东县释</p>
                            </div>
                        </li>

                        <li>
                            <div class="m-news-img"><img alt="" src="__TPMPLATE__pc/shijia/images/news.jpg"></div>
                            <div class="m-news-cont">
                                <p class="m-news-title">广东单个面积最大释迦基地与台湾释迦生产合作社合作</p>
                                <p class="m-news-time">2019-08-21</p>
                                <p class="m-news-txt">湛江双双赢释迦种植基地吸引了台湾释迦种植协会的关注，20日，台湾台东县释台湾台东县释台湾台东县释</p>
                            </div>
                        </li>

                        <li>
                            <div class="m-news-img"><img alt="" src="__TPMPLATE__pc/shijia/images/news.jpg"></div>
                            <div class="m-news-cont">
                                <p class="m-news-title">广东单个面积最大释迦基地与台湾释迦生产合作社合作</p>
                                <p class="m-news-time">2019-08-21</p>
                                <p class="m-news-txt">湛江双双赢释迦种植基地吸引了台湾释迦种植协会的关注，20日，台湾台东县释台湾台东县释台湾台东县释</p>
                            </div>
                        </li>

                        <li>
                            <div class="m-news-img"><img alt="" src="__TPMPLATE__pc/shijia/images/news.jpg"></div>
                            <div class="m-news-cont">
                                <p class="m-news-title">广东单个面积最大释迦基地与台湾释迦生产合作社合作</p>
                                <p class="m-news-time">2019-08-21</p>
                                <p class="m-news-txt">湛江双双赢释迦种植基地吸引了台湾释迦种植协会的关注，20日，台湾台东县释台湾台东县释台湾台东县释</p>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="m-news-more">
                <a title="{$data.key ?? $system.keywords.value}" href="index-article-index-navid-57.html">查看更多</a>
            </div>

        </div>

    </div>

    <div class="h-dashi">

        <div class="h-dashi-bg">
            <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/dashi.jpg">
        </div>

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/dashi-title.png">
            </div>

            <div class="h-box h-dashi-box">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/dashiji-img.png">
            </div>

        </div>

    </div>

    <div class="h-activity">

        <div class="container">

            <div class="h-title">
                <img alt="{$data.key ?? $system.keywords.value}" src="__TPMPLATE__pc/shijia/images/gongsi.png">
            </div>

            <div class="h-box h-activity-box">

                <div class="act-picScroll">

                    <div class="bd">
                        <ul>
                            {Dl:list db="Article"  cid="'58'" lang="$lang" field="a.id,a.cid,a.miaoshu,a.title,a.image,a.issue,a.create_time" order="a.image DESC,a.create_time asc" limit="0,3" status="1"}
                            <li>
                                <a title="{$vo.title??''}" href="{:url('Article/detailed',['id'=>$vo.id,'navid'=>$vo.cid],'html',$Request.root.true)}">
                                    <img alt="{$vo.title??''}" src="__PUBLIC__/uploads/{$vo.image ?'image/'.$vo.image: 'not.jpg'}" />
                                </a>
                            </li>
                            {/DL:list}
                        </ul>
                    </div>

                    <div class="hd">
                        <ul><li></li><li></li><li></li></ul>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

{/block}

{block name="js"}
<script type="text/javascript" src="__TPMPLATE__pc/shijia/js/jquery.SuperSlide.2.1.3.js"></script>
<script type="text/javascript">
    $(".pro-picScroll").slide({
        titCell:".hd ul",
        mainCell:".bd ul",
        autoPage:true,
        effect:"left",
        autoPlay: false,
        vis:3,
        trigger:"click"
    });

    $(".news-picScroll").slide({
        titCell:".hd ul",
        mainCell:".bd ul",
        autoPage:true,
        effect:"left",
        autoPlay: false,
        vis:4,
        trigger:"click"
    });

    $(".act-picScroll").slide({
        mainCell:".bd ul",
        autoPlay:false,
        effect:"left",
        trigger:"click"
    });
</script>

<script type="text/javascript" src="__TPMPLATE__pc/shijia/js/swiper/swiper.min.js"></script>
<script type="text/javascript">
    var certifySwiper = new Swiper('#certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 3,
        autoplay: false,                             // 自动播放
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        pagination: '.swiper-pagination',
        paginationClickable :true,                  // 是否开启 点击按钮
        simulateTouch: true,                       // 是否开启 鼠标拖动图片
        onProgress: function(swiper, progress) {
            for (i = 0; i < swiper.slides.length; i++) {
                var slide = swiper.slides.eq(i);
                var slideProgress = swiper.slides[i].progress;
                modify = 1;
                if (Math.abs(slideProgress) > 1) {
                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                translate = slideProgress * modify * 260 + 'px';
                scale = 1 - Math.abs(slideProgress) / 3;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', zIndex);
                slide.css('opacity', 1);
                if (Math.abs(slideProgress) > 3) {
                    slide.css('opacity', 0);
                }
            }
        },
        onSetTransition: function(swiper, transition) {
            for (var i = 0; i < swiper.slides.length; i++) {
                var slide = swiper.slides.eq(i)
                slide.transition(transition);
            }

        },
        //处理分页器bug
        onSlideChangeStart: function(swiper) {
            if (swiper.activeIndex == 4) {
                swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
                // console.log(swiper.bullets.length);
            }
        }
    });
</script>
{/block}